<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <div>
        <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline">
          <el-form-item label="宝贝标题：" prop="name">
            <el-input
              v-model="query.name"
              clearable
              placeholder="输入宝贝标题"
              style="width: 180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="评价类型：" prop="level">
            <el-select v-model="query.level" clearable placeholder="评价类型" class="filter-item" style="width: 180px">
              <el-option v-for="item in levelTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="operate-container">
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="add">新增评论</el-button>
        </div>
      </div>
      <!-- 新增 -->
      <!--新增评论 表单组件-->
      <eForm ref="form" :is-add="isAdd" />
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
        <el-table-column
          label="序号"
          width="70px"
          align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column ref="table" :show-overflow-tooltip="true" label="宝贝缩略图" align="center">
          <template slot-scope="scope">
            <a :href="scope.row.commodity_url" style="color: #42b983" target="_blank">
              <img :src="scope.row.commodity_url" alt="点击打开" class="el-avatar">
            </a>
          </template>
        </el-table-column>
        <el-table-column label="宝贝标题" prop="name" show-overflow-tooltip align="center"/>
        <el-table-column label="评价内容" prop="content" show-overflow-tooltip align="center"/>
        <el-table-column label="评价等级">
          <template slot-scope="scope">
            <div v-if="scope.row.level === 100">来自商城意见反馈</div>
            <div v-else-if="scope.row.level === 0">1星</div>
            <div v-else>{{ scope.row.level }}星</div>
          </template>
        </el-table-column>
        <el-table-column label="评价人" prop="nick" align="center" />
        <el-table-column label="联系方式" prop="contact" align="center" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state === 1">未发布</div>
            <div v-if="scope.row.state === 0">已发布</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_date" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!--发布评论触发事件-->
            <el-popover
              v-if="scope.row.state === 1"
              :ref="scope.row.comment_id"
              placement="top"
              width="180">
              <p>确定发布本条评论吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.comment_id].doClose()">取消</el-button>
                <el-button :loading="delLoading" type="primary" size="mini" @click="subRelease(scope.row)">确定</el-button>
              </div>
              <!--发布按钮-->
              <el-button slot="reference" type="primary" icon="el-icon-upload" size="mini" >发布</el-button>
            </el-popover>
            <!--删除触发事件-->
            <el-popover
              v-if="scope.row.state === 0"
              :ref="scope.row.comment_id"
              placement="top"
              width="180">
              <p>确定删除本条评论吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.comment_id].doClose()">取消</el-button>
                <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row)">确定</el-button>
              </div>
              <!--删除按钮-->
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" >删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        background
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { updateState, commodityList } from '@/api/mall/comment'
import eForm from './form'
export default {
  components: { eForm },
  mixins: [initData],
  data() {
    return {
      levelTypeOptions: [
        { key: '1', display_name: '商品评价' },
        { key: '100', display_name: '商城反馈' }
      ],
      query: {
        name: '',
        level: ''
      },
      delLoading: false,
      releaseLoading: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = 'api/comment-list'
      const sort = 'create_date,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const name = query.name
      const level = query.level
      if (name && name !== '' && name !== null) { this.params['name'] = name }
      if (level && level !== '' && level !== null) { this.params['level'] = level }
      return true
    },
    subDelete(info) {
      // 删除评论
      this.delLoading = true
      const json = { 'commodity_id': info.commodity_id, 'comment_id': info.comment_id, 'state': 1 }
      updateState(json).then(() => {
        this.delLoading = false
        this.$refs[info.comment_id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      }).catch(() => {
        this.delLoading = false
        this.$refs[info.comment_id].doClose()
      })
    },
    subRelease(info) {
      // 发布评论
      this.releaseLoading = true
      const json = { 'commodity_id': info.commodity_id, 'comment_id': info.comment_id, 'state': 0 }
      updateState(json).then(() => {
        this.releaseLoading = false
        this.$refs[info.comment_id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '发布成功',
          type: 'success',
          duration: 2500
        })
      }).catch(() => {
        this.releaseLoading = false
        this.$refs[info.comment_id].doClose()
      })
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
      // 获取公司商品信息
      commodityList().then(ref => {
        this.$refs.form.commodityList = ref
      })
    },
    resetQuery() {
      // 重置，重置表单，刷新页面
      this.$refs['query'].resetFields()
      this.init()
    }
  }
}
</script>

<style scoped>

</style>
